<template>
  <div>
    <div class="covChina">{{ title }}</div>
    <div class="title">
      <button :class="{ active: active }" @click="changeCov(1)">
        现有确诊
      </button>
      <button :class="{ active1: active1 }" @click="changeCov(2)">
        累计确诊
      </button>
    </div>
    <div :id="main" style="width: 7rem; height: 7rem"></div>
  </div>
</template>

<script>
export default {
  props: ["title", "curConfirm", "confirm", "main"],
  name: "MyMap",
  data() {
    return {
      active: true,
      active1: false,
    };
  },
  methods: {
    changeCov(flag) {
      if (flag == 1) {
        this.active1 = !this.active1;
        this.active = !this.active;
        this.$emit("changeTabMap", this.curConfirm);
      }
      if (flag == 2) {
        this.active = !this.active;
        this.active1 = !this.active1;
        this.$emit("changeTabMap", this.confirm);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.covChina {
  margin-top: 0.15rem;
  padding-left: 0.3rem;
  height: 0.25rem;
  line-height: 0.25rem;
  &::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    width: 0.07rem;
    height: 0.25rem;
    background-color: #1989fa;
  }
}
.title {
  display: flex;
  justify-content: space-around;
  margin: 0.3rem 0 0 0.15rem;
  font-size: 12px;
  > button {
    background-color: #fff;
    width: 1.2rem;
    height: 0.5rem;
    border-radius: 3px;
    // color: #fff;
    border: 1px solid #fff;
    // padding: 0 0.15rem;
    margin: 0 0.02rem;
  }
  .active {
    background-color: #1989fa;
    color: #fff;
  }
  .active1 {
    background-color: #1989fa;
    color: #fff;
  }
  // .active2 {
  //   background-color: #aaa;
  // }
}
</style>